<%@page import="com.cn.simplify.xutil.enums.DepartmentType"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<c:set var="GROUP" value="<%=DepartmentType.GROUP %>"/>
<c:set var="COMPANY" value="<%=DepartmentType.COMPANY %>"/>
<c:set var="DEPARTMENT" value="<%=DepartmentType.DEPARTMENT %>"/>
<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <title>部门管理</title>
     <link rel="stylesheet" href="${ctx}/static/support/bootstrap-tree/tree.css" type="text/css" />
  </head>
  <body>
    <div class="container-fluid">
      <!-- 路径导航 -->
	  <ol class="breadcrumb">
	    <li><a href="${ctx}/workbench">主页</a></li>
	    <li><a href="${ctx}/department">部门管理</a></li>
	    <li class="active">
	      <c:if test="${action eq 'create'}">添加部门</c:if>
	      <c:if test="${action eq 'update'}">修改部门</c:if>
	    </li>
	  </ol>
	  <!-- /路径导航 -->
	  
	  <div class="panel panel-default">
	    <div class="panel-heading">
	      <h3 class="panel-title">
	        <c:if test="${action eq 'create'}">添加部门</c:if>
	        <c:if test="${action eq 'update'}">修改部门</c:if>
	      </h3>
	    </div>
	    
	    <div class="panel-body">
	      <form class="form-horizontal" id="department-form" action="${ctx}/department/${action}" method="post" role="form">
	        <input type="hidden" id="department-id" name="id" value="${department.id}">
	        
	        <div class="form-group">
	          <label for="department-name" class="col-sm-2 control-label">部门名称</label>
	          <div class="col-sm-10">
	            <input type="text" class="form-control" id="department-name" name="name" value="${department.name}" placeholder="部门名称">
	          </div>
	        </div>
	        
	        <div class="form-group">
	          <label for="department-name" class="col-sm-2 control-label">类型</label>
	          <div class="col-sm-10">
	            <label class="radio-inline"> <input type="radio" name="departmentType" value="${GROUP }" <c:if test="${GROUP eq department.departmentType }">checked="checked"</c:if>>${GROUP.value}</label>
	            <label class="radio-inline"> <input type="radio" name="departmentType" value="${COMPANY }" <c:if test="${COMPANY eq department.departmentType }">checked="checked"</c:if>>${COMPANY.value}</label>
	            <label class="radio-inline"> <input type="radio" name="departmentType" value="${DEPARTMENT }" <c:if test="${DEPARTMENT eq department.departmentType }">checked="checked"</c:if>>${DEPARTMENT.value}</label>
	          </div>
	        </div>
	        
	        <div class="form-group">
	          <label for="department-name" class="col-sm-2 control-label">上级部门</label>
	          <div class="col-sm-10">
	            <input type="text" id="department-higher-name" value="${department.higherDepartment.name}" class="form-control" placeholder="上级部门" readonly="readonly" />
	            <input type="hidden" id="department-higher-id" name="higherDepartment.id" value="${department.higherDepartment.id}" class="form-control"/>
	            <div id="departmentTree" style="display:none;"></div>
	          </div>
	        </div>
	        
	        <div class="form-group">
	          <label for="department-description" class="col-sm-2 control-label">部门简介</label>
	          <div class="col-sm-10">
	            <textarea rows="5" cols="10" class="form-control" id="department-description" name="description" placeholder="输入您对部门的描述">${department.description}</textarea>
	          </div>
	        </div>
	        
	        <div class="form-group">
	          <div class="col-sm-offset-2 col-sm-10">
	            <button type="submit" class="btn btn-default"> 提 交 </button>
	            <button type="button" class="btn btn-default" onclick="history.back()"> 返 回 </button>
	          </div>
	        </div>
	      </form>
	    </div>
	    
	  </div>

	</div>
	
    <div id="menuContent" style="display:none; position: absolute;">
      <ul id="departmentTree" style="margin-top:0; width:160px;"></ul>
    </div>
	
	<!-- 以下开始 加载JS动态效果 -->
	
	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="${ctx}/static/jquery/jquery-1.11.1.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="${ctx}/static/bootstrap-3.2.0-dist/js/bootstrap.min.js"></script>
    
    <!-- bootstrap-tree 自定义树 -->
	<script src="${ctx}/static/support/bootstrap-tree/bootstrap.asynchronous.tree.js"></script>
	
	<script type="text/javascript">
	jQuery(document).ready(function() {
		Tree.setPath("${ctx}");  //设置项目路径
		jQuery.ajax({
			url: "${ctx}/department/asyn_tree",
			type: "post",
			dataType: "json",
			success: function(msg) {
				Tree.setData(msg);
				Tree.init("#departmentTree");
				Tree.onClick(function(node){
					$("#department-higher-name").val(node.name);
					$("#department-higher-id").val(node.id);
					$("#departmentTree").hide();
				});
			}
		});
		
		$("#department-higher-name").click(function(){
			$("#departmentTree").width($(this).outerWidth());
			$("#departmentTree").show();
			$("#departmentTree").offset({top: $(this).offset().top+$(this).outerHeight(),left: $(this).offset().left});
		});
	});
	</script>
  </body>
</html>